<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="initdata()" size="small">查询搜索</el-button>
        <el-button style="float:right;margin-right: 15px" @click="resetfiled()" size="small">重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="openid">
            <el-input
              v-model="listQuery.openid"
              class="input-width"
              placeholder="请输入openid"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="username">
            <el-input
              v-model="listQuery.username"
              class="input-width"
              placeholder="请输入username"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="sex">
            <el-input v-model="listQuery.sex" class="input-width" placeholder="请输入sex" clearable></el-input>
          </el-form-item>
          <el-form-item label="card">
            <el-input v-model="listQuery.card" class="input-width" placeholder="请输入card" clearable></el-input>
          </el-form-item>
          <el-form-item label="iphone">
            <el-input
              v-model="listQuery.iphone"
              class="input-width"
              placeholder="请输入iphone"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="address">
            <el-input
              v-model="listQuery.address"
              class="input-width"
              placeholder="请输入address"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="companyname">
            <el-input
              v-model="listQuery.companyname"
              class="input-width"
              placeholder="请输入companyname"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="status">
            <el-input
              v-model="listQuery.status"
              class="input-width"
              placeholder="请输入status"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="communityid">
            <el-input
              v-model="listQuery.communityid"
              class="input-width"
              placeholder="请输入communityid"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="communityname">
            <el-input
              v-model="listQuery.communityname"
              class="input-width"
              placeholder="请输入communityname"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="photo">
            <el-input
              v-model="listQuery.photo"
              class="input-width"
              placeholder="请输入photo"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="inorout">
            <el-input
              v-model="listQuery.inorout"
              class="input-width"
              placeholder="请输入inorout"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="companynumber">
            <el-input
              v-model="listQuery.companynumber"
              class="input-width"
              placeholder="请输入companynumber"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="roomnumber">
            <el-input
              v-model="listQuery.roomnumber"
              class="input-width"
              placeholder="请输入roomnumber"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button size="mini" class="btn-add" @click="isadd()" style="margin-left: 20px">添加</el-button>
    </el-card>

    <div style="margin:0px;">
      <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column prop="openid" label="openid" align="center"></el-table-column>
        <el-table-column prop="username" label="username" align="center"></el-table-column>
        <el-table-column prop="sex" label="sex" align="center"></el-table-column>
        <el-table-column prop="card" label="card" align="center"></el-table-column>
        <el-table-column prop="iphone" label="iphone" align="center"></el-table-column>
        <el-table-column prop="address" label="address" align="center"></el-table-column>
        <el-table-column prop="companyname" label="companyname" align="center"></el-table-column>
        <el-table-column prop="status" label="status" align="center"></el-table-column>
        <!-- <el-table-column prop="communityid" label="communityid" align="center"></el-table-column> -->
        <el-table-column prop="communitynamed" label="communitynamed" align="center"></el-table-column>
        <!-- <el-table-column prop="photo" label="photo" align="center"></el-table-column>
                <el-table-column prop="inorout" label="inorout" align="center"></el-table-column>
        <el-table-column prop="companynumber" label="companynumber" align="center"></el-table-column>-->
        <el-table-column prop="roomnumber" label="roomnumber" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="delrecord(scope.row)">删除</el-button>
            <el-button
              type="primary"
              @click="isupdate = true;refform = scope.row; isadddia = true;"
            >更新</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      ></el-pagination>
    </div>
    <el-dialog
      :title="isupdate ? '更新' : '添加'"
      :visible.sync="isadddia"
      center
      width="40%"
      @close="isadddia = false"
    >
      <el-form :model="refform" ref="refform" label-width="80px" style="margin: 0px 70px;">
        <el-form-item label="openid">
          <el-input v-model="refform.openid"></el-input>
        </el-form-item>
        <el-form-item label="username">
          <el-input v-model="refform.username"></el-input>
        </el-form-item>
        <el-form-item label="sex">
          <el-input v-model="refform.sex"></el-input>
        </el-form-item>
        <el-form-item label="card">
          <el-input v-model="refform.card"></el-input>
        </el-form-item>
        <el-form-item label="iphone">
          <el-input v-model="refform.iphone"></el-input>
        </el-form-item>
        <el-form-item label="address">
          <el-input v-model="refform.address"></el-input>
        </el-form-item>
        <el-form-item label="companyname">
          <el-input v-model="refform.companyname"></el-input>
        </el-form-item>
        <el-form-item label="status">
          <el-input v-model="refform.status"></el-input>
        </el-form-item>
        <el-form-item label="communityid">
          <el-input v-model="refform.communityid"></el-input>
        </el-form-item>
        <el-form-item label="communityname">
          <el-input v-model="refform.communityname"></el-input>
        </el-form-item>
        <el-form-item label="photo">
          <el-input v-model="refform.photo"></el-input>
        </el-form-item>
        <el-form-item label="inorout">
          <el-input v-model="refform.inorout"></el-input>
        </el-form-item>
        <el-form-item label="companynumber">
          <el-input v-model="refform.companynumber"></el-input>
        </el-form-item>
        <el-form-item label="roomnumber">
          <el-input v-model="refform.roomnumber"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="isadddia = false">取 消</el-button>
        <el-button type="primary" @click="isupdate ? updaterecord() : addrecord()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import HealthregistrationService from "@/api/HealthregistrationService";

export default {
  components: {},
  data() {
    return {
      listQuery: {
        id: "",
        openid: "",
        username: "",
        sex: "",
        card: "",
        iphone: "",
        address: "",
        companyname: "",
        status: "",
        communityid: "",
        communityname: "",
        photo: "",
        inorout: "",
        companynumber: "",
        roomnumber: ""
      },
      pageSize: 5,
      currentPage: 1,
      totalNum: 0,
      isupdate: false,
      isshowqr: false,
      qrdata: "",
      tableData: [],
      isadddia: false,
      refform: {
        openid: "",
        username: "",
        sex: "",
        card: "",
        iphone: "",
        address: "",
        companyname: "",
        status: "",
        communityid: "",
        communityname: "",
        photo: "",
        inorout: "",
        companynumber: "",
        roomnumber: ""
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initdata();
  },
  methods: {
    sizeChange(val) {
      this.pageSize = val;
      this.initdata();
    },
    currentChange(val) {
      this.currentPage = val;
      this.initdata();
    },

    delrecord(row) {
      HealthregistrationService.remove({ code: row.code }).then(res => {
        console.log(res);
        this.initdata();
      });
    },
    updaterecord() {
      HealthregistrationService.update(this.refform).then(res => {
        console.log(res);
        this.isadddia = false;
        this.initdata();
      });
    },
    initdata() {
      HealthregistrationService.listd({
        current: this.currentPage,
        size: this.pageSize,
        openid: this.listQuery.openid,
        username: this.listQuery.username,
        sex: this.listQuery.sex,
        card: this.listQuery.card,
        iphone: this.listQuery.iphone,
        address: this.listQuery.address,
        companyname: this.listQuery.companyname,
        status: this.listQuery.status,
        communityid: this.listQuery.communityid,
        communityname: this.listQuery.communityname,
        photo: this.listQuery.photo,
        inorout: this.listQuery.inorout,
        companynumber: this.listQuery.companynumber,
        roomnumber: this.listQuery.roomnumber
      }).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.totalNum = res.data.total;
      });
    },
    isadd() {
      this.isadddia = true;
      this.isupdate = false;
      this.refform.openid = "";
      this.refform.username = "";
      this.refform.sex = "";
      this.refform.card = "";
      this.refform.iphone = "";
      this.refform.address = "";
      this.refform.companyname = "";
      this.refform.status = "";
      this.refform.communityid = "";
      this.refform.communityname = "";
      this.refform.photo = "";
      this.refform.inorout = "";
      this.refform.companynumber = "";
      this.refform.roomnumber = "";
    },

    resetfiled() {
      this.listQuery.openid = "";
      this.listQuery.username = "";
      this.listQuery.sex = "";
      this.listQuery.card = "";
      this.listQuery.iphone = "";
      this.listQuery.address = "";
      this.listQuery.companyname = "";
      this.listQuery.status = "";
      this.listQuery.communityid = "";
      this.listQuery.communityname = "";
      this.listQuery.photo = "";
      this.listQuery.inorout = "";
      this.listQuery.companynumber = "";
      this.listQuery.roomnumber = "";
    },

    addrecord() {
      // this.isadddia = true
      HealthregistrationService.insert(this.refform).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.isadddia = false;
          this.initdata();
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>